Class binding (中文：類別繫結)

class binding 讓你可以新增或移除 class名稱從一個 element 的 class attributes
https://angular.io/guide/template-syntax#class-binding

範例一：一般使用 element class

app/app.component.css
-----
.bgYellow {
    background-color: yellow;
}

.colorBlue {
    color:blue;
}

app/app.component.html
-----
<h1 class="bgYellow colorBlue">
    Welcome to {{title}}!
</h1>

顯示

範例二：利用 [class] = string 去控制整個 class 的值

撰寫在 html 的 class 自然會作廢，轉而使用 屬性繫結 class 的值
[class] = "x"， class 屬性繫結的值，是一個 變數名稱 x
[class] = " ' beYB ' " ， class 屬性繫結的值，是一個 string 值 'beYB'

app/app.component.css
-----
.bgYellow {
    background-color: yellow;
}

.colorBlue {
    color: blue;
}

.beYB {
    color: yellow;
    background-color: blue;
}

app/app.component.html
-----
<h1 class="bgYellow colorBlue" [class]="'beYB'" >
    Welcome to {{title}}!
</h1>

顯示

範例三：利用 [class.使用class名稱] = boolean 去控制 單個 class 存或廢

app/app.component.css
-----
.bgYellow {
    background-color: yellow;
}

.colorBlue {
    color: blue;
}

app/app.component.html
-----
<h1 class="bgYellow colorBlue" [class.bgYellow]="false" >
    Welcome to {{title}}!
</h1>

顯示

範例四：搭配 directive 可以更細膩控制每個 class

https://angular.io/guide/template-syntax#ngClass

app/app.component.css
-----
.bgYellow {
    background-color: yellow;
}

.colorBlue {
    color: blue;
}

app/app.component.html
-----
<h1 [ngClass]="{'bgYellow': true,'colorBlue':false}" >
    Welcome to {{title}}!
</h1>

顯示